<template>
  <el-table :data="state.tableData" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <el-icon><timer /></el-icon>
        <span style="margin-left: 10px">{{ scope.row.display_time }}</span>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <p>姓名: {{ scope.row.author }}</p>
            <p>住址: {{ scope.row.title }}</p>
          </template>
          <template #reference>
            <div class="name-wrapper">
              <el-tag size="medium">{{ scope.row.author }}</el-tag>
            </div>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Status" width="180">
      <template #default="scope">
        <el-button :type="type(scope.row)" plain>{{ scope.row.status }}</el-button>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { getList } from '@/api/table'
import { Timer } from '@element-plus/icons'

const state = reactive({
  tableData: []
})
const type = item => {
  const typestates = {
    published: 'primary',
    draft: 'success',
    deleted: 'danger'
  }
  return typestates[item.status]
}
const handleEdit = (index, row) => {
  console.log(index, row)
}
const handleDelete = (index, row) => {
  console.log(index, row)
}
onMounted(async () => {
  const res = await getList()
  state.tableData = res.data.items
  // console.log(`🚀 ~ file: index.vue ~ line 76 ~ mounted ~ res`, res.data.items)
})
</script>
